<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<!DOCTYPE html>
	<html lang="en" class="no-ie" style="overflow:hidden;">
		<head>
			<meta charset="UTF-8">
			<title>不合格商品提示</title>
			<script>
				"object" != typeof ue || "object" != typeof ue.interface ? ("object" != typeof ue && (ue = {}), ue.interface = {},
					ue.interface.broadcast = function(e, t) {
						if ("string" == typeof e) {
							var o = [e, ""];
							void 0 !== t && (o[1] = t);
							var n = encodeURIComponent(JSON.stringify(o));
							"object" == typeof history && "function" == typeof history.pushState ? (history.pushState({}, "",
								"#" + n), history.pushState({}, "", "#" + encodeURIComponent("[]"))) : (document.location
								.hash = n, document.location.hash = encodeURIComponent("[]"))
						}
					}) : function(e) {
					ue.interface = {}, ue.interface.broadcast = function(t, o) {
						"string" == typeof t && (void 0 !== o ? e.broadcast(t, JSON.stringify(o)) : e.broadcast(t, ""))
					}
				}(ue.interface), (ue4 = ue.interface.broadcast);
			</script>
			<script src="./dist/echarts-5.3.2.min.js"></script>

			<script src="./static/js/jquery.min.js"></script>
			<!-- <script src="./static/js/FuncTest.js"></script>
            <script src="./static/js/PortChart.js"></script> -->
			<script>
				$(function() {
					ue4("getSize", {
						mes: "get windows size"
					});
					ue4("getColor", {
						mes: "get all color"
					});
					ue4("getData", {
						mes: "get all data"
					});
					ue4("beginSize", {
						mes: BeginSize[0],
						mes2: BeginSize[1]
					});
					ue4("beginSizeY", {
						mes: BeginSize
					});
				});
				/*$(function () {

				});*/
			</script>
			<style>
				* {
					margin: 0;
					padding: 0;
				}
			</style>
		</head>
		<body>
			<div id="main"></div>
			<!--
		dataTemp1: y轴数值;dataTemp2: x轴标题
		
		-->
			<script>
				let BeginSize = [400, 400];
				let myChart = null;
				let dataName=['马铃薯','黄瓜','大白菜','茄子','其他','其他1']
				let dataValue=[50.01,25.92,25.93,15.93,5.93,5.93]
				let timeId=null;
				function fresh() {
				let dataList=[]
					dataName.forEach((item,index)=>{
						dataList.push({
							name: item,
							value: dataValue[index]
						})
					})
					// 准备待返回的配置项，把准备好的 legendData、series 传入。
					let option = {
						backgroundColor:'rgba(13,29,70,0.75)',
						title: {
						        text: '{a|' + dataList[0].value+ '}\n{b|' + dataList[0].name+ '}',
						        x: 'center',
						        y: 'center',
						        textStyle: {
						            rich:{
						            	a:{
						            		fontSize:52,
						            		color:'#72E7FF',
						            		fontWeight:'bold'
						            	},
						            	b:{
						            		fontSize:36,
						            		color:'#FFFFFF',
						            		fontWeight:'bold'
						            	}
						            }
						        },
						    },
						graphic: {
						        elements: [
						            {
						                type: 'image',
						                z: 1,
						                style: {
						                    image: 'https://s1.ax1x.com/2022/07/04/jJ5NOP.png',
						                    width: 310,
						                    height: 310,
						                },
										rotation:45,
						                left: 'center',
						                top: 'center',
						            },
						        ],
						    },
						color:['#2975D4','#8ABEFF','#72E7FF','#FF5E5E', 
						'#FFE59E','#30EFBF','#968AFF','#A1A1A1', 
						  ],
						tooltip: {
							show:false
						},
						legend: {
							show:false
						},
						series: [{
							name: 'Access From',
							type: 'pie',
							radius: ['68%', '75%'],
							avoidLabelOverlap: false,
							itemStyle: {
								borderRadius: 20,
								borderColor: '#0D1D46',
								borderWidth: 2
							},
							label: {
								show: false,
								position: 'center'
							},
							emphasis: {
								label: {
									show: false
									
								}
							},
							labelLine: {
								show: false
							},
							data: dataList
						}]
					};
					myChart = echarts.init(document.getElementById('main'));
					myChart.clear();
					myChart.setOption(option);
					function startInterval(){
						if(timeId){
							clearInterval(timeId)
						};
						timeId=setInterval(()=>{
							if(option.graphic.elements[0].rotation<=-360){
								option.graphic.elements[0].rotation=0
							}else{
								option.graphic.elements[0].rotation-=45;
							}
							myChart.setOption(option);
						},300)
					}
					startInterval()
					myChart.dispatchAction({
					  type: 'highlight',
					  seriesIndex: 0,
					  dataIndex: 0
					});
				}

				fresh();


				//浏览器测试用
				change(BeginSize[0], BeginSize[1]);
				changeBorder('red', false, 'topl', 10);
				//fresh();

				function LinkUE4() {
					//alert("I am an alert box!!");
					//ue4("getData2",{mes:"get all data"});
					ue4("CallBack", {}, function(v) {
						alert("I am an alert box!!");
					});
				};

				function change(x, y) {
					let div = document.getElementById("main");
					//alert("I am an alert box!!");
					div.style.width = x + "px";
					div.style.height = y + "px";
					var myOption = myChart.getOption();
					myChart.resize();
					let types = []
					myOption.series.forEach((item) => {
						types.push(item.type)
					})
					return types
				}

				function changeBorder(x, y, p, n) {
					let div = document.getElementById("main");
					div.style.border = `0px solid ${x}`;
					if (y) {
						div.style.borderRadius = '10px'
					} else {
						if (p = 'topl') {
							div.style.borderTopLeftRadius = n + 'px';
						} else if (p = 'topr') {
							div.style.borderTopRightRadius = n + 'px';
						} else if (p = 'bottoml') {
							div.style.borderBottomLeftRadius = n + 'px';
						} else if (p = 'bottomr') {
							div.style.borderBottomRightRadius = n + 'px';
						}
					}
					myChart.resize();
				}

				ue.interface.ChangeSize = function(data) {
					//alert("I am an alert box!!");
					change(data[0], data[1]);


				};

				ue.interface.TransColor = function(data) {
					myColor = data;
				};

				ue.interface.TransColorFresh = function(data) {
					myColor = data;
					fresh();
				};



	ue.interface.TransData = function(data) {
	//var obj = JSON.parse(JSON.stringify(data));
		dataName = data.data1;
		dataValue = data.data2;
			fresh();
			};
				//刷新数据但不刷新动画，只是曲线变化
				ue.interface.Ani = function(data) {
					var myOption = myChart.getOption();
					myChart.setOption(myOption);
				};

				//刷新动画且更新数据
				ue.interface.ReAni = function(data) {
					var myOption = myChart.getOption();
					myChart.clear();
					myChart.setOption(myOption);
				};

				/************下面数据***********/
				ue.interface.TransData1 = function(data) {
					dataTemp1 = data;
					fresh();
				};

				ue.interface.TransData1 = function(data) {
					dataTemp2 = data;
					fresh();
				};

				ue.interface.titleData1 = function(data) {
					titleshow = data;
					fresh();
				};
				ue.interface.titleData1 = function(data) {
					titletext = data;
					fresh();
				};
				ue.interface.titleData1 = function(data) {
					titleleft = data;
					fresh();
				};
				ue.interface.titleData1 = function(data) {
					titletop = data;
					fresh();
				};
				ue.interface.titleData1 = function(data) {
					titlebottom = data;
					fresh();
				};
				ue.interface.titleData1 = function(data) {
					titleright = data;
					fresh();
				};
				ue.interface.titleData1 = function(data) {
					titlefsize = data;
					fresh();
				};
				ue.interface.titleData1 = function(data) {
					titlecolor = data;
					fresh();
				};

				ue.interface.legendData1 = function(data) {
					legendshow = data;
					fresh();
				};
				ue.interface.legendData1 = function(data) {
					legendname = data;
					fresh();
				};
				ue.interface.legendData1 = function(data) {
					legendleft = data;
					fresh();
				};
				ue.interface.legendData1 = function(data) {
					legendtop = data;
					fresh();
				};
				ue.interface.legendData1 = function(data) {
					legendbottom = data;
					fresh();
				};
				ue.interface.legendData1 = function(data) {
					legendright = data;
					fresh();
				};
				ue.interface.legendData1 = function(data) {
					legendiWidth = data;
					fresh();
				};
				ue.interface.legendData1 = function(data) {
					legendiHeight = data;
					fresh();
				};
				ue.interface.legendData1 = function(data) {
					legendcolor = data;
					fresh();
				};

				ue.interface.splitLineData1 = function(data) {
					xsplitLine = data;
					fresh();
				};
				ue.interface.splitLineData1 = function(data) {
					ysplitLine = data;
					fresh();
				};

				ue.interface.axisLineData1 = function(data) {
					xaxisLineshow = data;
					fresh();
				};
				ue.interface.axisLineData1 = function(data) {
					yaxisLineshow = data;
					fresh();
				};

				ue.interface.axisLabelData1 = function(data) {
					xaxisLabelshow = data;
					fresh();
				};
				ue.interface.axisLabelData1 = function(data) {
					xaxisLabelfsize = data;
					fresh();
				};
				ue.interface.axisLabelData1 = function(data) {
					xaxisLabelcolor = data;
					fresh();
				};
				ue.interface.axisLabelData1 = function(data) {
					yaxisLabelshow = data;
					fresh();
				};
				ue.interface.axisLabelData1 = function(data) {
					yaxisLabelfsize = data;
					fresh();
				};
				ue.interface.axisLabelData1 = function(data) {
					yaxisLabelcolor = data;
					fresh();
				};
				ue.interface.barWidthData1 = function(data) {
					barWidth = data;
					fresh();
				};
			</script>
		</body>
	</html>

	<body>
	</body>
</html>
